<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字体属性</title>

        <style type="text/css">
            /* .wrapper 等同于 [class~=wrapper] */
            .wrapper{
                width: 80% ;
                height: 50px ;
                margin: 15px auto ;
            }

            .first { background-color: #dedede ; }

            .second {
                background-color: #ffff00 ;
                font-size: 18px ; /* 设置元素内部文本的尺寸 (如果有子元素，子元素的 font-size 会继承该属性值 )*/
            }

            .second>i { 
                font-style: normal ; /* 设置元素内部字体的显式风格( inherit | normal | italic | oblique )*/ 
                font-weight: bold ; /* 设置字体的粗细 ( normal | lighter | bold | bolder )*/
                color: red ;
            }

            .second>em { 
                font-style: normal ; /* 设置元素内部字体的显式风格( inherit | normal | italic | oblique )*/ 
                font-family: "思源宋体";
                color: red ;
            }

            .second>a {
                font-family: "思源宋体";
                font-size: 20px ;
                font-weight: bold ;
                font-style: italic ;
            }

            .second>span {
                /* font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; */
                /* 通过 font 属性 可以依次序设置 按顺序设置如下属性： font-style font-variant font-weight font-size/line-height font-family ; */
                font: italic bold 20px "思源宋体",sans-serif;
            }

            .third {
                font-size: 14px ;
                line-height : 50px ; 
                border: 1px solid blue ;
            }
        </style>

    </head>
    <body>

        <div class="wrapper first">
            <a>链接或锚点</a>
            <span>定义普通文本</span>
            <u>带有下划线的文本</u>
            <i>斜体文笔</i>
            <s>带有删除线(中划线)的文本</s>
            <b>加粗的文本</b>
            <strong>特别强调</strong>
            <em>斜体文本</em>
        </div>

        <div class="wrapper second">
            <a>链接或锚点</a>
            <span>定义普通文本</span>
            <u>带有下划线的文本</u>
            <i>斜体文本</i>
            <s>带有删除线(中划线)的文本</s>
            <b>加粗的文本</b>
            <strong>特别强调</strong>
            <em>斜体文本</em>
        </div>

        <div class="wrapper third">
            测试行高(line-height)
        </div>
        
    </body>
</html>